<template>
    <div>
        <div ref="mapContainer" class="map"></div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, useTemplateRef } from "vue";
import {ElRow, ElCol } from "element-plus";
import GeoJSON from "ol/format/GeoJSON.js";
import VectorSource from "ol/source/Vector.js";
import VectorLayer from "ol/layer/Vector.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import Draw from "ol/interaction/Draw.js";
import Feature from "ol/Feature.js";
import Fill from "ol/style/Fill.js";
import LineString from "ol/geom/LineString.js";
import Stroke from "ol/style/Stroke.js";
import Snap from "ol/interaction/Snap.js";
import Style from "ol/style/Style.js";


//mapContainer的名称必须与div中ref的名称保持一致
const mapContainer = ref<HTMLElement | null>(null);
//使用useTemplateRef获取模板中的ref，此时名称可不一致
const target = useTemplateRef("mapContainer");

let map: Map | null = null;
onMounted(() => {
    console.log("mapContainer", mapContainer.value);
    const vector1 = new VectorLayer({
        source: new VectorSource({
            url: "https://openlayers.org/data/vector/ecoregions.json",
            format: new GeoJSON(),
        }),
    });
    const vector2 = new VectorLayer({
        source: new VectorSource({
            url: "https://ahocevar.com/geoserver/wfs?service=wfs&request=getfeature&typename=topp:states&cql_filter=STATE_NAME=%27Idaho%27&outputformat=application/json",
            format: new GeoJSON(),
        }),
        style: new Style({
            stroke: new Stroke({
                color: "red",
                width: 2,
            }),
            fill: new Fill({
                color: "rgba(255,0,0,0.1)",
            }),
        }),
    });
    console.log("source", vector1.getSource());
    map = new Map({
        target: target.value as HTMLElement,
        view: new View({
            center: [0, 0],
            zoom: 1,
        }),
    });
    map.addLayer(vector1);
    map.addLayer(vector2);
});
</script>

<style scoped>
</style>
